import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { Route, Switch, Redirect } from 'react-router-dom'
import Cookies from 'js-cookie'
import {
  NavBar
} from 'antd-mobile'

import { getRedirectTo } from '../../utils'
import { getUserInfo } from '../../redux/actions'
import './main.scss'

import DashenInfo from '../dashen-info/dashen-info'
import LaobanInfo from '../laoban-info/laoban-info'
import Dashen from '../dashen/dashen'
import Laoban from '../laoban/laoban'
import Message from '../message/message'
import Personal from '../personal/personal'
import NotFound from '../../components/not-found/not-found'
import TabFooter from '../../components/tab-footer/tab-footer'
import Chat from '../chat/chat'


class Main extends Component {

  static propTypes = {
    user: PropTypes.object.isRequired,
    unreadCount: PropTypes.number.isRequired, // 未读消息总数量
    getUserInfo: PropTypes.func.isRequired
  }

  // 底部导航列表
  tabBarList = [
    {
      path: '/laoban',
      component: Laoban,
      title: '大神列表',
      icon: 'shouye',
      text: '首页'
    },
    {
      path: '/dashen',
      component: Dashen,
      title: '老板列表',
      icon: 'shouye',
      text: '首页'
    },
    {
      path: '/message',
      component: Message,
      title: '消息列表',
      icon: 'message',
      text: '消息'
    },
    {
      path: '/personal',
      component: Personal,
      title: '用户中心',
      icon: 'personal',
      text: '个人'
    }
  ]

  componentDidMount() {
    // cookie有userid，但是redux中没有_id,根据cookie发起请求获取用户信息
    const userid = Cookies.get('userid')
    const { _id } = this.props.user
    if ( userid && !_id ) {
      this.props.getUserInfo()
    }

  }

  render() {
    const userid = Cookies.get('userid')
    // cookie没有userid，重定向登录
    if (!userid) {
      return <Redirect to="/login" />
    } 

    const {user, unreadCount} = this.props
    // cookie有userid，但是redux中没有_id,根据cookie发起请求获取用户信息,return null等待
    if (!user._id) {
      return null
    } else {
      // cookie有userid，redux中有_id，请求根路径('/')，利用type和信息完善度来计算重定向值
      let path = this.props.location.pathname
      if (path === '/') {
        path = getRedirectTo(user.type, user.header)
        return <Redirect to={path} />
      }
    }

    // 获取匹配有tabBar的路由
    const path = this.props.location.pathname
    const currentTab = this.tabBarList.find(tab => tab.path === path)

    return ( // cookie有userid，redux中有_id,且不为跟路径，直接匹配跳转某一路由
      <div>
        { currentTab ? <NavBar className="myNav">{currentTab.title}</NavBar> : null }
        <Switch>
          <Route path="/laobaninfo" component={LaobanInfo} />
          <Route path="/dasheninfo" component={DashenInfo} />
          {
            this.tabBarList.map((tab) => (
              <Route path={tab.path} component={tab.component} key={tab.path} />
            ))
          }
          <Route path="/chat/:userid" component={Chat} />
          <Route component={NotFound} />
        </Switch>
        { currentTab ? <TabFooter tabBarList={this.tabBarList} userType={user.type} unreadCount={unreadCount} /> : null}
      </div>
    )
  }
}

export default connect(
  state => ({ user: state.user, unreadCount: state.chat.unreadCount }),
  { getUserInfo}
)(Main)
